<!--
- File:    活动商品列表.
-->
<template>
  <div class="Web_Box">
    <div class="actban">
      <img :src="$config.imgsite + $config.activityImgSrc + storeId + '/' + goodsList.data.groupbuy_image + '_w640h320'" class="wauto">
      <div class="timjd f-cb" v-if="!timeout && goodsList.data.type == 1">
        <span class="fl f26">本次活剩余时间</span>
        <div class="daojishi fr">
          <span class="timem disib vm">{{timeRemain.days}}</span><span class=" disib vm">&nbsp;天&nbsp;</span><span class="timem disib vm">{{timeRemain.hours}}</span><span class=" disib vm">&nbsp;时&nbsp;</span><span class="timem disib vm">{{timeRemain.minutes}}</span><span class="disib vm">&nbsp;分&nbsp;</span><span class="timem disib vm">{{timeRemain.seconds}}</span><span class="disib vm">&nbsp;秒&nbsp;</span>
        </div>
      </div>
    </div>
    <div class="newlist">
      <ul class="f-cb">
        <li class="f-cb" v-for="item in goodsList.data.extend_goods_info" @click="gotoGoodsDetail(item.goods_commonid)">
          <div class="mewimg2">
            <img style="width: 100%" :src="$config.imgsite + $config.goodsImgSrc + storeId + '/' + item.goods_image + '_w150'" alt="">
          </div>
          <div class="righttext fl" style="width:10rem; padding-top:0;text-align: left">
            <p class=" slh">{{item.goods_name}}</p>
            <p class=" Prices2 tl pt20">￥{{item.goods_price | discount(goodsList.data.groupbuy_rebate)}}<span class=" t-du">￥{{item.goods_marketprice}}</span>
            </p>
            <p class="pt10 xiang" v-show="goodsList.data.upper_limit != 0">限购{{goodsList.data.upper_limit}}件</p>
            <div class="daojishi pt20" v-show="timeout">
              <span style="color: #999">该活动已结束</span></div>
          </div>
        </li>
      </ul>
      <empty-data :show="goodsList.requested && goodsList.data.extend_goods_info.length <= 0" style="margin-top: 1.5rem"></empty-data>
    </div>
    <div class="activeDetailsEntry" v-show="activeContent !=''">活动详情</div>
    <div v-show="activeContent !=''">
      <div class="active-detail" ref="detail" v-html="activeContent" v-show="activeContent!=''">
      </div>
      <div style="padding: 0.5rem 0;text-align: center" v-show="activeContent==''">
        暂时没有详情介绍
      </div>
    </div>
    <footer-tab></footer-tab>
  </div>
</template>

<script>
  export default{
    data() {
      return {
        storeId: this.$route.query.storeId || this.$utils.getQueryString('storeId') || this.$storage.getStore() || this.$config.storeId,
        groupbuyId: this.$route.params.id,
        activeContent: '',
        goodsList: {requested: false, data: {extend_goods_info: []}},
        timeRemain: {days: 0, hours: 0, minutes: 0, seconds: 0},
        countdownInterval: null
      }
    },
    components: {},
    created() {
      this.getActiveGoodsList(this.groupbuyId)
      setTimeout(() => {
        console.log(this.timeRemain)
      }, 1000)
    },
    mounted() {
    },
    beforeDestroy() {
      clearInterval(this.countdownInterval)
    },
    computed: {
      timeout: function () {
        if (this.timeRemain.days < 0 || this.timeRemain.hours < 0 || this.timeRemain.minutes < 0 || this.timeRemain.seconds < 0) {
          return true
        }
        return false
      }
    },
    methods: {
      gotoGoodsDetail(id) {
        if (this.timeout) {
          return
        }
//        this.$router.push({name: 'goods-detail', params: {id: id}, query: {storeId: this.storeId}})
        window.location.href = 'http://' + window.location.host + '/wap/goods/detail/' + id + '?storeId=' + this.storeId// ios微信分享要如此跳转后才能正确分享
      },
      getActiveGoodsList(id) {
        this.$request.getPanicBuyingGoodsList(id).then(data => {
          this.activeContent = data.groupbuy_intro
          this.goodsList.data = data
          this.getTimeRemain(data.end_time)
          clearInterval(this.countdownInterval)
          this.countdownInterval = setInterval(() => {
            this.getTimeRemain(data.end_time)
          }, 1000)
          let title = data.groupbuy_name
          let imgSrc = this.$config.imgsite + this.$config.activityImgSrc + data.groupbuy_image
          console.log('share', window.location.href, title, imgSrc)
          this.$native.weixinShare(window.location.href, title, imgSrc, '遇花园')
        }).catch(e => {
          this.$toast('获取活动商品列表失败：' + e.msg)
        }).finally(() => {
          this.goodsList.requested = true
        })
      },
      getTimeRemain(endTimeTamp) {
        if (endTimeTamp) {
          let currentTime = new Date()
          let endTime = new Date()
          endTime.setTime(endTimeTamp * 1000)
          this.timeRemain = this.$utils.timeDif(currentTime, endTime)
        }
      }
    }
  }
</script>

<style lang="less">
  .activeDetailsEntry {
    height: 2.35rem;
    line-height: 2.35rem;;
    font-size: 14px;
    color: #000;
    background: #fff;
    padding-left: .5rem;
    margin-top: .25rem;
  }
  .active-detail {
  img {
    width: 100% !important;
    height: auto !important;
  }
  }
</style>